<template>
  <div class="container">
    <el-page-header @back="goBack" content="客户列表"></el-page-header>
    <div class="e-m-t-45">
      <div class="flex">
        <div class="e-flex-1">
          <!-- <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible = true">新增客户</el-button> -->
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-input placeholder="请输入关键词" v-model="namekey" prefix-icon="el-icon-search" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="注册日期" prop="">
            <el-date-picker v-model="data" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setTime" :unlink-panels="true">
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item label="IC卡编号">
            <el-input placeholder="请输入" prefix-icon="el-icon-search" v-model="iccode" clearable >
            </el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 更多筛选条件 -->
    <div class="other-search-form is-active">
          <el-form label-position="left" :inline="true" size="small">
              <div class="flex align-items-center">
                  <div class="e-flex-1">
                    <el-form-item label="注册日期" prop="">
                      <el-date-picker v-model="data" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setTime" :unlink-panels="true">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="e-flex-1">
                    <el-form-item label="客户类型">
                      <el-select v-model="type" placeholder="请选择">
                        <el-option label="不限" value="0"></el-option>
                        <el-option label="普通客户" value="1"></el-option>
                        <el-option label="客户组客户" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
              </div>
          </el-form>
      </div>
    <el-table :data="tableData" :border="true" style="width: 100%" stripe @row-click="rowClick">
      <el-table-column fixed type="index" width="50">
      </el-table-column>
      <el-table-column fixed label="客户名称">
        <template slot-scope="scope">
          <div class="user-face">
            <div class="avatar">
              <el-avatar v-if="scope.row.photo" :src="fileURL + scope.row.photo" :size="40"></el-avatar>
              <el-avatar v-else :size="40">{{ scope.row.name.charAt(0) }}</el-avatar>
              <!-- <i class="iconfont icon-nan male" v-if="scope.row.sex == '先生'"></i>
              <i class="iconfont icon-nv female" v-else></i> -->
            </div>
            <div class="name e-p-l-15"><span>{{ scope.row.name }}</span><el-tag class="e-m-l-5" size="mini" v-if="scope.row.enterprisenumber > 0">客户组</el-tag></div>
            <!-- <div class="name e-p-l-15" v-html="scope.row.name"></div> -->
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="usestate" label="绑定微信" width="150">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.openid">已绑定</span>
          <span class="color-danger" v-else>未绑定</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="usestate" label="绑定IC卡" width="100">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.iccode">{{ scope.row.iccode }}</span>
          <span class="color-danger" v-else>未绑定</span>
        </template>
      </el-table-column>
      <el-table-column prop="usestate" label="人面识别" width="100">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.isface">已录</span>
          <span class="color-danger" v-else>待录</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="type" label="客户类型" width="150">
      </el-table-column> -->
      <el-table-column prop="mobile" label="手机号" width="150">
      </el-table-column>
      <el-table-column prop="regdate" label="注册时间" width="150">
      </el-table-column>
      <el-table-column prop="lastlogindatetime" label="最后登录时间" width="150">
      </el-table-column>
      <!-- <el-table-column prop="usestate" label="账号状态" width="150">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.usestate == '已启用'">{{ scope.row.usestate }}</span>
          <span class="color-danger" v-else>{{ scope.row.usestate }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" fixed="right" width="300">
        <template slot-scope="scope">
          <!-- <el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button> -->
          <el-tooltip class="item" effect="dark" content="按住ctrl键+鼠标左键新窗口打开" placement="left-start">
            <el-button type="text" size="small" @click.stop="views($event,scope.row)">查看</el-button>
					</el-tooltip>
          <!-- <el-button type="text" @click.stop='startup(scope.row)' size="small">
            <span v-if="scope.row.usestate == '已启用'">冻结</span>
            <span v-else>启用</span>
          </el-button> -->
          <!-- <el-button type="text" @click.stop='pawsss(scope.row)' size="small">重置密码</el-button> -->

          <!-- <el-button type="text" size="small" @click="goGuest(scope.row.id)">查看推广客户</el-button>
          <el-button type="text" size="small" @click="goRecord(scope.row.id)">查看推广佣金</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <!-- <el-dialog title="新增客户" :visible.sync="dialogVisible" width="500px">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
        <el-form-item label="客户名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="addForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>

        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="初始密码">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createUser">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="重置密码" :visible.sync="dialogVisible2" width="500px">
      <el-form ref="form" :model="pform" label-width="100px">
        <el-form-item label="新密码">
          <el-input v-model="pform.newPass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="pform.confirmpass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="submitP">确定</el-button>
      </span>
    </el-dialog> -->
    <!-- 详情页面弹窗 -->
		<!-- <el-drawer
			title=""
			:visible.sync="viewShow.show"
			direction="rtl"
			size="96%"
      :style="{'left':'50%'}"
			:with-header="false"
      :modal="false"
			>
			<userView v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></userView>
		</el-drawer> -->
    <el-drawer
			title=""
			:visible.sync="viewShow.show"
			direction="rtl"
			size="80%"
			:with-header="false"
			>
			<userView v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></userView>
		</el-drawer>
  </div>
</template>

<script>
import userView from './components/views.vue'
export default {
  layout: 'admin',
  components:{
    userView
  },
  head() {
    return {
      title: '客户列表' 
    }
  },
  data() {
    return {
      viewShow:{
				id: 0,
				show: false //详情页面弹窗
			},
      iccode:'',
      data: "",
      start: "",
      end: '',
      dialogVisible2: false,
      pform: {
        name: "",
        id: 0,
        newPass: "",
        confirmpass: ""
      },
      usertype: 0,
      loading: true,
      namekey: '',
      phonekey: '',
      page: 1,
      pageSize: 10,
      total: 8,
      tableData: [],
      type: "0",
      // 新增客户
      dialogVisible:false,
      addForm:{
        sex:1
      },
      rules: {
          name: [
              { required: true, message: '请填写客户名', trigger: 'blur' },
          ],
          mobile: [
              { required: true, message: '请填写手机号', trigger: 'blur' },
          ]
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if(!val){
        this.addForm = { sex:1}
      }
    },
    dialogVisible2(val) {
      let that = this
      if (!val) {
        this.pform = {
          name: "",
          id: 0,
          newPass: "",
          confirmpass: ""
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // createUser(){ //新增客户
    //   this.$refs.addForm.validate((valid) => {
    //       if (valid) {
    //         this.$axios.post('/Admin/User/Account/Create',this.addForm).then((res)=>{
    //           this.$message.success("新增客户成功");
    //           this.dialogVisible = false
    //           this.getList()
    //         })
    //       } else {
    //           console.log('error submit!!');
    //           return false;
    //       }
    //   });
    // },
    setTime(e) {
      console.log(e)
      if(e == null){
        this.start = ''
        this.end = ''
        this.getList()
      }else{
        this.start = e[0]
        this.end = e[1]
      }
    },
    submitP() {
      this.$axios.post('/User/ResetPass', {
            "id": this.pform.id,
            // "curPass": this.pform.newPass,
            "newPass": this.pform.confirmpass,
            "againPass": this.pform.confirmpass
        }).then((res) => {
            console.log(res)
            this.$message.success("密码已重置");
            this.dialogVisible2 = false
        })
    },
    // pawsss(row) {
    //   console.log(row)
    //   this.pform.name = row.name
    //   this.pform.id = row.id

    //   this.dialogVisible2 = true
    // },
    goBack() {
      this.$router.go(-1)
    },
    getList() {
      this.tableData = []
      this.loading = true

      this.$axios.post('/User/List', {
        "PageIndex": this.page,
        "PageSize": this.pageSize,
        "Key": this.namekey,
        "type": this.type, 
        "start": this.start,
        "end": this.end
      }).then((res) => {
        this.loading = false
        this.tableData = res.rows;
        this.total = res.total;
      }).catch((err) => {
        this.loading = false
      })
    },
    views(event,row) {
      if (event.ctrlKey) {
				console.log('Ctrl + 左键点击');
				// 这里可以执行你需要的操作
				let param = []
				for(let k in this.param){
					if(this.param[k]){
						param.push(`${k}=${this.param[k]}`)
					}
				}
				this.$router.push(`/user/list?${param.join('&')}`)

        var newWindow = window.open('/user/views?id=' + row.id, '_blank');
        newWindow.focus();
			} else {
				console.log('普通点击');
				this.viewShow.id = row.id
				this.viewShow.show = true
			}
    },
    rowClick(row){
      this.viewShow.id = row.id
			this.viewShow.show = true
    },
    pageChange(e) { // 页码切换事件
      this.page = e;
      this.getList()
    },
    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getList()
    },
    startup(row) {
      let usetate = ''
      if (row.usestate == '已冻结') {
        usetate = 2
      } else {
        usetate = 1
      }

      this.$confirm('是否修改账号状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/user/SetState', { ids: [row.id], state: usetate }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.getList()
        })
      })
    },
    goGuest(id){
        this.$router.push('/user/invite?id='+id+'&type=1')
    },
    goRecord(id){
      this.$router.push('/user/commission?id='+id+'&type=1')
    },
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  padding: 20px 0 0;
}

.send {
  margin-top: 15px;
  margin-right: 10px;
}

.dialogForm {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 50%;
    float: left;

    &.all {
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}

.user-face {
  display: flex;
  align-items: center;
  position: relative;

  .male,
  .female {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 0;
    background-color: #fff;
    height: 16px;
    width: 16px;
    line-height: 16px;
    border-radius: 6px;
  }

  .male {
    color: var(--blue);
  }

  .female {
    color: var(--pink);
  }
}
</style>
